<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="../jquery/jquery-3.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">

</head>
<body>

<pre>
    <h3>
        折叠效果中每个标题都对应一个内容，在bootStrap中将这两部分组合起来放在一个面板中,每个面板名自包含一个名为class="panel-group"的容器中
        链接属性要添加data-toggle="collapse"和data-parent="#面板父容器ID"
    </h3>
</pre>
<div class="container">

    <div class="panel-group" id="panelContainer">
        <div class="panel panel-default ">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse1" data-toggle="collapse" data-parent="#panelContainer">标题一</a>
                </h4>
            </div>
            <div class="panel-collapse collapse in" id="collapse1">
                <div class="panel-body">
                    标题一对应的内容
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse2" data-toggle="collapse" data-parent="#panelContainer">标题二</a>
                </h4>
            </div>
            <div class="panel-collapse collapse " id="collapse2">
                <div class="panel-body">
                    标题二对应的内容
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse3" data-toggle="collapse" data-parent="#panelContainer">标题三</a>
                </h4>
            </div>
            <div class="panel-collapse collapse " id="collapse3">
                <div class="panel-body">
                    标题三对应的内容
                </div>
            </div>
        </div>
    </div>
    <h4>简单结构</h4>
    <button class="btn btn-primary" data-toggle="collapse" data-target="#btnCollapse">按钮</button>
    <div id="btnCollapse" class="collapse in">折叠去内容</div>
</div>
</body>
</html>